<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>设备管理</title>
	<style>
		table {
			border-collapse: collapse;
			width: 100%;
		}

		th,
		td {
			border: solid thin;
			text-align: center;
		}

		td>span {
			margin-right: 5px;
		}

		[v-if],
		[v-for] {
			display: none;
		}
	</style>
</head>

<body>

	<div id="vue-root">
		<input placeholder="请输入名称" v-model="name">
		<input placeholder="请输入设备号" v-model="code">
		<select v-if="!xajyUser" v-model="xajy">
			<option :value="false">非校安家园</option>
			<option :value="true">校安家园</option>
		</select>
		<button @click="add">添加设备</button>
		<a href="/pc/logout">退出登录</a>

		<table>
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>设备号</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<tr v-for="(item,index) in list" :key="item.id">
				<td v-text="index"></td>
				<td v-text="item.name"></td>
				<td v-text="item.code"></td>
				<td v-text="item.disabled?'禁用':'启用'"></td>
				<td>
					<template v-if="!xajyUser&&xajy">
						已收费 <input type="checkbox" :checked="item.paid" @input="togglePaid(item)">
					</template>
					<button v-text="item.disabled?'启用':'禁用'" @click="toggle(item)"></button>
					<button @click="del(item.id)">删除</button>
				</td>
			</tr>

		</table>
	</div>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script>
		var url = '/api/device3';

		new Vue({
			el: '#vue-root',
			data: {
				list0: [],
				name: '',
				code: '',
				xajy: true
			},
			created: function () {
				this.getData();
			},
			methods: {
				getData: function () {
					axios.get(url).then(function (res) {
						this.list0 = res.data;
						this.list0.sort(function (a, b) {
							a = a.name;
							b = b.name;
							if (a == b) return 0;
							return a > b ? 1 : -1;
						});
					}.bind(this));
				},
				add: function () {
					axios.post(url, {
						name: prompt('请输入名称'),
						code: prompt('请输入设备号')
					}).then(function (res) {
						this.getData();
						alert('成功');
					}.bind(this));
				},
				toggle: function (item) {
					axios.put(url, {
						id: item.id,
						disabled: !item.disabled
					}).then(function (res) {
						this.getData();
					}.bind(this));
				},
				del: function (id) {
					if (!confirm('确认删除?')) return;
					axios.delete(url + '/' + id).then(function (res) {
						this.getData();
					}.bind(this));
				},
				togglePaid: function (item) {
					item.paid = !item.paid;
					axios.put(url, {
						id: item.id,
						paid: item.paid
					}).then(function (res) {
						this.getData();
					}.bind(this));
				}
			},
			computed: {
				xajyUser: function () {
					return this.list0.every(function (it) {
						return it.xajy;
					});
				},
				list: function () {
					return this.list0.filter(function (it) {
						if (!it.name) it.name = '';
						if (!it.code) it.code = '';
						return it.name.indexOf(this.name) >= 0
							&& it.code.indexOf(this.code) >= 0
							&& it.xajy == this.xajy;
					}.bind(this));
				}
			},

		});
	</script>

</body>

</html>